<div q-view="myview">
    book name：<span q-text="{book.name}"></span><br>
    price:<span q-text="{book.price}"></span>元<br>
    <button q-click="change">change price</button>
    <button q-click="changeAll">change all</button>
    <br>
    <button q-click="add">update array</button>
    (<span q-text="{list.length}"></span>)

    <div q-each="list">
        <div>
            <span q-text="{$index}+1"></span>.
            name:<span q-text="{name}"></span>
            sex:<span q-text="{sex}"></span>
        </div>
    </div>
</div>
<script>
    qc.view("myview", function (vm, ve) {
        vm.book = {
            name: "VueJS",
            price: "36"
        }
        vm.list = [{name: "Andy", sex: "male"}, {name: "Lily", sex: "female"}];
        ve.add = function () {
            vm.$set("list", [{name: "Lucy", sex: "female"}, {name: "Lily", sex: "male"}])
        }
        ve.change = function () {
            vm.book.$set("price", "40");
        }
        ve.changeAll = function () {
            vm.book.$set({
                name: "ReactJS",
                price: 99
            });
        }
    })
</script>